<template>
  <el-form
    ref="ruleFormRef"
    :model="category"
    :label-width="formLabelWidth"
    size="large"
    :rules="rules"
  >
    <el-form-item label="活动类别名称" prop="activity_categoryName">
      <el-input v-model="category.activity_categoryName"></el-input>
    </el-form-item>
    <el-form-item label="描述">
      <el-input
        v-model="category.activity_categoryDes"
        :rows="5"
        type="textarea"
        placeholder="Please input"
      />
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="category.activity_categoryState" class="ml-4">
        <el-radio label="1" size="large">开启</el-radio>
        <el-radio label="2" size="large">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-button
      type="primary"
      style="width: 16rem; margin-left: 10rem; margin-top: 1rem"
      @click="submitCa(ruleFormRef)"
      >提交</el-button
    >
  </el-form>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { reqInsertCategory } from '@/api/activity'
import { ElMessage } from 'element-plus'
const sotre = useStore()
const { dispatch, getters } = sotre
const formLabelWidth = '10rem'
const category = reactive({
  activity_categoryDes: '',
  activity_categoryName: '',
  activity_categoryState: '1'
})
// 表单校验
const ruleFormRef = ref()
const rules = reactive({
  activity_categoryName: [
    { required: true, message: '活动类别名称不能为空', trigger: 'blur' }
  ]
})
const pagination = computed(() => getters.activityPagination)
// 提交按钮
const submitCa = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const ca = {
        activity_categoryDes: '',
        activity_categoryName: '',
        activity_categoryState: '1'
      }
      for (const key in category) {
        if (key !== 'date') {
          if (Object.hasOwnProperty.call(category, key)) {
            ca[key] = category[key]
          }
        }
      }
      const result = await reqInsertCategory(ca)
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        dispatch('activity/getCategoryList', { pagination })
        category.activity_categoryDes = ''
        category.activity_categoryName = ''
        category.activity_categoryState = '1'
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 40rem;
}
</style>
